<template>
  <div class="user">
    <el-container>
      <!--头部 -->
      <el-header>
        <div class="block-header">
          <h2>用户管理</h2>
        </div>
      </el-header>
      <!-- 侧边栏 -->
      <div class="main">
        <el-container height="700px">
          <el-aside width="200px" height>
            <div class="panel">
              <div class="panel-heading" style="padding:5px;">组织机构</div>
              <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2]"
                :default-checked-keys="[1,2,8]"
              ></el-tree>
            </div>
          </el-aside>
          <el-container>
            <el-main>
              <!-- 中间的顶部 -->
              <div class="main-heading">
      
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <!-- input -->
                 <el-form-item>
                  <el-input v-model="formInline.keywords" placeholder="名字" ref="key"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary"  icon="el-icon-search"  @click="onSubmit">搜索</el-button>
                    <!-- 重置 -->
                    <el-button type="primary"  class="reset" icon="el-icon-connection" @click="reset">重置</el-button>
                    <!-- 添加 -->
                      <el-button type="primary"  icon="el-icon-plus" style="margin-left:10px" @click="add">添加
                      
                      </el-button>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 表单 -->
              <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
                <el-table-column prop="number" sortable label="账号" width></el-table-column>
                <el-table-column prop="name" sortable label="姓名"></el-table-column>
                <el-table-column prop="sex" sortable label="性别"></el-table-column>
                <el-table-column prop="role" sortable label="角色"></el-table-column>
                <el-table-column prop="department" sortable label="部门"></el-table-column>
                <el-table-column prop="email" sortable label="邮箱"></el-table-column>
                <el-table-column prop="tel" sortable label="电话"></el-table-column>
                <el-table-column prop="date" sortable label="创建时间"></el-table-column>
                <el-table-column prop="handle" label="操作">
                  <!-- 编辑和删除 -->
                   <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" circle style="background:#ccc"></el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer>显示记录</el-footer>
          </el-container>
        </el-container>
      </div>
    </el-container>
      <!-- 会员信息编辑容器 -->
      <div class="mark" v-show="isShow">
          <edit-box :rule-form="ruleForm" @cancel="cancel" :type="'edit'"></edit-box>
      </div>
      <!-- 添加 -->
       <div class="mark" v-show="isShow1">
           <add-member @can="can" :rule-form="ruleForm"></add-member>
       </div>               
  </div>
</template>

<script type="text/ecmascript-6">
import EditBox from "@/components/user/EditBox";
import AddMember from "@/components/user/AddMember";
import { getAllMember, delMember,selectMember } from "@/api/users.js";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      isShow: false,
      isShow1: false,
      ruleForm:{},
      data: [
        {
          id: 1,
          label: "顶级",
          children: [
            {
              id: 2,
              label: "总公司",
              children: [
                {
                  id: 3,
                  label: "开发部"
                },
                {
                  id: 4,
                  label: "运营部"
                },
                {
                  id: 5,
                  label: "战略部"
                },
                {
                  id: 6,
                  label: "人事部"
                },
                {
                  id: 7,
                  label: "行政部"
                },
                {
                  id: 8,
                  label: "上海分公司",
                  children: [
                    {
                      id: 9,
                      label: "运维部"
                    },
                    {
                      id: 10,
                      label: "销售部"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      formInline: {
        user: "",
        region: ""
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
    };
  },
  components: {
    EditBox,
    AddMember
  },
  methods: {
    can(){
      this.isShow1=false;
    },
    onSubmit() {
      selectMember(this.formInline)
         .then(res=>{
           this.tableData = res.data.list
         })
      },
    formatter(row, column) {
      return row.address;
    },
     handleEdit(index, row) {
        this.isShow = true;
        this.ruleForm = row;
      },
      add(index, row){
         this.isShow1 = true;
         this.ruleForm = row;
      },
      handleDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            delMember(row.Id).then(res => {
                if (res.data.code === 3000) {
                this.tableData.splice(index, 1);
                }
            });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      cancel(){
      this.isShow = false;
    },
    reset(){
        this.$refs.key.value=''
    }
  },
  created(){
    //发起请求
      getAllMember()
      .then(res => {
        if (res.data.code === 3000) {
          // console.log(res.data.list);
          this.tableData = res.data.list;
          this.isLoading = false;
        }
      })
      .catch(err => {
        this.isLoading = false;
      });
  }
};
</script>

<style lang="stylus" scoped>
.user {
  margin-top: 10px;
  margin-left: 10px;
  background-color: #fff;
  padding-left: 30px;
  width: 1650px;
}

.block-header h2 {
  font-size: 15px;
  color: #777;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 10px;
  padding-left: 10px;
}

.el-aside {
  height: 100%;
}

.reset {
  background-color: #00BCD4;
}

.panel {
  height: 100%;
}

.main {
  height: 700px;
}

.panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #dddddd;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  width: 186px;
  border-radius: 2px;
}

.main-heading {
  display: flex;
  justify-content: flex-start;
}

.el-main {
  height: 600px;
  border-bottom 1px solid #ddd;
}

.el-footer {
  font-size: 14px;
  color: #333;
}
.mark{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
</style>
